<template>
  <div>
    <h1>{{base64}}</h1>
    <el-button @click="download">下载</el-button>
    <div v-html="text"></div>
  </div>
</template>

<script>
import Base64 from "@/utils/base64"

export default {
  data() {
    return {
      base64: "",
      text:'<p style="font-weight: bold;">123456</p>',
      htmlarea:`<p style="font-weight: bold;">123456</p>`
    }
  },
  created() {
    // 前端
    let base = new Base64();
    this.base64 = base.encode("待加密字符串");

    // 后端java
    // 加密
    // String base64 = Base64.getEncoder().encodeToString("待加密字符串".getBytes(StandardCharsets.UTF_8));
    // System.out.println("base64 = " + base64);
    // 5b6F5Yqg5a+G5a2X56ym5Liy

    // 解密
    // String str = new String(Base64.getDecoder().decode("5b6F5Yqg5a+G5a2X56ym5Liy"), StandardCharsets.UTF_8);
    // System.out.println("str = " + str);
  },
  methods: {
    //文件下载，blob数据或者base64转为file
    download() {
      console.log("------开始下载------");
      let data = "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";
      const blob = this.buildBlobByByte(data)
      let fileName = "test.xlsx";
		  this.downloadFile(blob, fileName)

    },
    downloadFile: function (blob, fileName) {
      // const link = document.createElement('a')
      // link.href = window.URL.createObjectURL(blob)
      // link.download = fileName
      // // 此写法兼容可火狐浏览器
      // document.body.appendChild(link)
      // const evt = document.createEvent('MouseEvents')
      // evt.initEvent('click', false, false)
      // link.dispatchEvent(evt)
      // document.body.removeChild(link)

      let link = document.createElement('a');
      link.href = window.URL.createObjectURL(blob);
      link.target = '_blank';
      link.download = fileName;  // 下载的文件名称
      document.body.appendChild(link);  // 添加创建的 a 标签 dom节点
      link.click();  // 下载
      document.body.removeChild(link);  // 移除节点
    },
    // 将Base64文件转为 Blob
    buildBlobByByte: function (data) {
      const raw = window.atob(data)
      const rawLength = raw.length
      const uInt8Array = new Uint8Array(rawLength)
      for (let i = 0; i < rawLength; ++i) {
        uInt8Array[i] = raw.charCodeAt(i)
      }
      return new Blob([uInt8Array])
    },
  },
}
</script>